<!doctype html>
<html lang="en">

<head>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="vue.js"></script>

    <title>设计流程</title>

</head>
<style>
    .tooltip {
        width: 250px;
        min-height: 300px;
        background-color: rgba(255, 255, 255, 0.7);
        position: fixed;
        z-index: 2147483647;
        right: 30px;
        bottom: 30px;
        font-size: 15px;
        border: solid navy 2px;
    }
    
    .tooldrag {
        background-color: navy;
        width: 100%;
        height: 30px;
        text-align: center;
        padding-top: 4px;
        color: white
    }
    
    .realcontent {
        padding: 20px;
    }
    
    .innercontent {
        padding-top: 10px;
        padding-left: 15px;
    }
    
    .innercontent a {
        display: block;
        text-decoration: none;
        margin-top: 10px;
        color: navy;
    }
    
    .innercontent button {
        margin-top: 10px;
        font-size: 15px;
        border-radius: 5px;
        border: solid 2px navy;
        background-color: white;
        color: navy;
        width: 100px;
        height: 35px;
        cursor: pointer;
    }
</style>

<body>

    <div class="tooltip">
        <div class="tooldrag">操作提示框</div>
        <div id="app" class="realcontent">
            <div v-if="temp==0">
                ● 请点选页面元素。
            </div>

            <div v-if="temp==1">
                ● 已选中一个链接，同时发现{{num}}个同类链接，您可以:
                <div class="innercontent">
                    <a href="#">选中全部</a>
                    <a href="#">采集元素文本</a>
                    <a href="#">选中全部</a>
                    <a href="#">采集该元素的Inner Html</a>
                    <a href="#">选中全部</a>
                    <a href="#">选中全部</a>
                    <button>取消选择</button>
                </div>

            </div>

        </div>

    </div>

</body>
<script>
    //处理逻辑层
    var app = new Vue({
        el: '#app',
        data: {
            temp: 1,
            num: 15,
        }
    })
    $('.tooldrag').mousedown(function(e) {
        // e.pageX
        var positionDiv = $(this).offset();
        var distanceX = e.pageX - positionDiv.left;
        var distanceY = e.pageY - positionDiv.top;
        //alert(distanceX)
        // alert(positionDiv.left);

        $(document).mousemove(function(e) {
            var x = e.pageX - distanceX;
            var y = e.pageY - distanceY;

            if (x < 0) {
                x = 0;
            } else if (x > window.innerWidth - $('.tooldrag').outerWidth(true)) {
                x = window.innerWidth - $('.tooldrag').outerWidth(true);
            }

            if (y < 0) {
                y = 0;
            } else if (y > window.innerHeight - $('.tooldrag').outerHeight(true)) {
                y = window.innerHeight - $('.tooldrag').outerHeight(true);
            }
            $('.tooltips').css({
                'right': window.innerWidth - x - $('.tooltip').outerWidth(true) + 'px',
                'bottom': window.innerHeight - y - $('.tooltip').outerHeight(true) + 'px',
            });
        });

        $(document).mouseup(function() {
            $(document).off('mousemove');
        });
    });
</script>

</html>